<!-- 我的邮箱 -->
<template>
  <div id="Email">
    <!-- 头部 -->
    <Head BackType1="1" NoticeType7='1' v-show="hasDisable" title="邮箱"></Head>
    <Head BackType1="1" NoticeType3='1' v-show="!hasDisable" v-on:SuccessClick="SuccessClick" title="邮箱"></Head>
    <div id="EmailBox">
      <div class="EmailTitle">输入您想要绑定的邮箱</div>
      <div class="EmailText">
        <input v-model="InputText" class="EmailInput" placeholder="请输入您想要绑定的邮箱" type="text">
        <img @click="DelEmail()" class="DelText" src="@/assets/img/clearButton.png" alt="">
      </div>

      <div class="EmailTips">
        <span>*</span>
        邮箱将作为找回密码的重要依据，请谨慎填写。
      </div>
    </div>
  </div>
</template>
<script>
  import Head from "../components/Head"
  import { Dialog } from 'vant';
  export default {
    data(){
      return{
        useremail:'',
        InputText:'',
        hasDisable:true,
      }
    },
    components:{
      Head,
      [Dialog.name]:Dialog,
    },
    mounted(){
      /**
      * 我的昵称
      */
     this.useremail = this.$route.query.name;
     if(this.useremail == '未设置'){
       this.InputText = '';
     }else{
       this.InputText = this.useremail       
     }
    },
    watch:{
      InputText(){
        if(this.InputText == this.useremail || (this.useremail =='未设置' &&this.InputText =='')){
          this.hasDisable = true
        }else{
          console.log(46464)
          this.hasDisable = false
        }
      }
    },
    methods:{
      DelEmail(){
        console.log(this.InputText)
        this.InputText =''
      },
      beforeRouteEnter (to, from, next) {
        next(vm => {
          document.body.scrollTop = vm.scrollTop
        })
      },
      SuccessClick(){
        if(this.InputText == ''){
          Dialog.alert({
            title: '提示',
            message: '没有输入邮箱，请重新填写'
          }).then(() => {
            // on close
          });
        }else{
          /**
          * 修改邮箱
          */
          var emailtext={
              email:this.InputText,
          }
          this.$post(urlConfig.bindEmail,emailtext)
            .then(res => {
            console.log(res);
            var hasAmend = true;
            this.$router.push({name:'MyInformation',params:
            {
              hasAmend: hasAmend,
              name:'邮箱'
            }})
          })
        }
      }
    },
  }
</script>

<style scoped lang="less">
  #Email{
    font-size: 24px;
    color: #888888;
    #EmailBox{
      width: 750px;
      position: fixed;
      top: 88px;
      .EmailTitle{
        padding: 18px 30px;
      }
      .EmailText{
        height: 88px;
        padding:0 30px;
        line-height: 88px;
        background: #fff;
        font-size: 30px;
        position: relative;
        .EmailInput{
          color: #333;
          width: 690px;
          height: 88px;
          &::-webkit-input-placeholder {
            font-size:26px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }
          &:-ms-input-placeholder {
            font-size:26px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }
        }
        img{
          position: absolute;
          right: 30px;
          top: 33px;
          height: 22px;
          width: 22px;
          border-radius: 11px;
        }
      }
      .EmailTips{
        font-size: 24px;
        padding: 0 30px;
        line-height: 50px;
        span{
          color: #E96767;
        }
      }
    }
  }
</style>
